<template>
	<view class="content">
		<view class="content-header" v-if="true">
			<view class="content-tip">
				<text>您正在通过邮箱</text>
				<text style="margin-top: 10rpx;">{{email}}</text>
				<text style="margin-top: 10rpx;">为账号</text>
				<text class="content-tip-account">{{account}}</text>
				<text>找回密码</text>
			</view>
			<view class="content-hedaer-item">
				<input class="content-header-item-input" type="text" v-model="code" placeholder="请输入验证码" @input="inputCode" maxlength="6" />
				<button type="primary" @click="getCode" class="content-hedaer-item-button" v-if="!isCountDown">获取验证码</button>
				<button type="default" @click="getCode" v-if="isCountDown" style="color: #c9c9c9;" disabled>获取验证码({{ countDown }})秒</button>
			</view>
			<view>
				<button type="primary" class="content-bottom" :disabled="canReset == false" @click="resetPassword">重置密码</button>
			</view>
		</view>
		<view class="content-header" v-if="resData.isMobile">
			<view class="content-tip">
				<text>您正在通过手机号码</text>
				<text style="margin-top: 10rpx;">{{mobile}}</text>
				<text style="margin-top: 10rpx;">为账号</text>
				<text class="content-tip-account">{{resData.account}}</text>
				<text>找回密码</text>
			</view>
			<view class="content-hedaer-item">
				<input class="content-header-item-input" type="text" v-model="code" placeholder="请输入验证码" @input="inputCode"
					maxlength="6" />
				<button type="primary" @click="getCode" class="content-hedaer-item-button" v-if="!isCountDown">获取验证码</button>
				<button type="default" @click="getCode" v-if="isCountDown" style="color: #c9c9c9;" disabled>获取验证码({{ countDown }})秒</button>
			</view>
			<view>
				<button type="primary" class="content-bottom" :disabled="canReset == false" @click="resetPassword">重置密码</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resData: '',
				code: '',
				account: '',
				email: '',
				mobile: '',
				isCountDown: false,
				countDown: 60,
				isDisabled: false,
				canReset: false
			}
		},
		onLoad(e) {
			let resData;
			if (e.resData) {
				
				resData = JSON.parse(e.resData);
				this.resData = resData;
				console.log("resData",this.resData);
				
				this.account = this.resData.account;
				let front = this.account.slice(0, 2);
				let behind = this.account.slice(-2);
				let middle = "*".repeat(6);
				this.account = front + middle + behind;
				if (resData.email) {
					this.email = this.resData.email;
					front = this.email.slice(0, 2);
					behind = this.email.slice(-9);
					middle = "*".repeat(6);
					this.email = front + middle + behind;
				}
				if (resData.mobile) {
					this.mobile = this.resData.mobile;
					front = this.mobile.slice(0, 2);
					behind = this.mobile.slice(-9);
					middle = "*".repeat(6);
					this.mobile = front + middle + behind;
				}
			}
		},
		methods: {
			resetPassword() {
				let that = this;
				
				if(that.code == null || that.code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				}
				if(that.code.length !== 6) {
					uni.showToast({
						title: '请输入六位验证码',
						icon: 'none'
					})
				} 
				else {
					if(this.resData.email) {
						let data = {
							email: that.resData.email,
							code: that.code
						}
						uni.request({
							url: 'http://localhost:8080/api/checkEmailCode',
							method: 'POST',
							data: data,
							header: {
								'Content-Type': 'application/json'
							},
							success: (res) => {
								console.log("res",res);
								if(res.data.data.code == 0) {
									uni.navigateTo({
										url: '/pages/login/forgetPwd/resetPwd?account='+this.resData.account
									})
								} else {
									uni.showToast({
										title: '验证码输入错误!',
										icon: 'none'
									})
								}
							}
						})
					}
					
					if(this.resData.mobile) {
						let data = {
							mobile: that.resData.mobile,
							code: that.code
						}
						uni.request({
							url: 'http://localhost:8080/api/checkMobileCode',
							method: 'POST',
							data: data,
							header: {
								'Content-Type': 'application/json'
							},
							success: (res) => {
								console.log("res",res);
								if(res.data.data.code == 0) {
									uni.navigateTo({
										url: '/pages/login/forgetPwd/resetPwd?account='+this.resData.account
									})
								} else {
									uni.showToast({
										title: '验证码输入错误!',
										icon: 'none'
									})
								}
							}
						})
					}
				}
				
			},
			inputCode() {
				let that = this;
				if(that.code) {
					that.isDisabled = true;
				} else {
					that.isDisabled = false;
				}
			},
			getCode() {
				let that = this;
				that.isCountDown = true;
				that.startCount();
				
				if (that.resData.isEmail) {
					let data = {
						email: that.resData.email
					}
					uni.request({
						url: 'http://localhost:8080/api/sendEmailCode',
						data: data,
						method: 'POST',
						header: {
							'Conteent-Type': 'application/json'
						},
						success: (res) => {
							that.canReset = true;
							console.log("res", res);
						}
					})
				}
				if (that.resData.isMobile) {
					let data = {
						mobile: that.resData.mobile
					}
					uni.request({
						url: 'http://localhost:8080/api/sendMobileCode',
						data: data,
						method: 'POST',
						header: {
							'Conteent-Type': 'application/json'
						},
						success: (res) => {
							console.log("res", res);
						}
					})
				}
			},
			async startCount() {
				this.countDown = 60; // 设置倒计时初始值
				const timer = setInterval(() => {
					if (this.countDown > 0) {
						this.countDown--; // 每秒减1
					} else {
						this.isCountDown = false;
						clearInterval(timer); // 倒计时结束，清除定时器
					}
				}, 1000);
			}
		}
	}
</script>

<style>
	view {
		background-color: #f8f8f8;
	}

	.content-header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 50rpx;
		font-weight: 600;
		margin-top: 10%;
	}

	.content-hedaer-item {
		display: flex;
		margin-top: 10%;
	}

	.content-tip {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 35rpx;
		color: #3db900;
		margin-top: 5%;
	}

	.content-tip-account {
		margin-top: 15%;
		margin-bottom: 15%;
		font-size: 60rpx;
		color: #ff0000;
	}

	.content-header-item-input {
		text-align: center;
		border: 1px solid #c9c9c9;
		padding: 20rpx;
		width: 35%;
		border-radius: 20rpx;
		box-shadow: 2rpx 2rpx 3rpx inset rgba(0, 0, 0, 0.1);
		margin-left: 10%;
	}

	.content-hedaer-item-button {
		display: flex;
		box-shadow: 2rpx 2rpx 3rpx rgba(0, 0, 0, 0.4);
	}

	.content-mail {
		display: flex;
		font-size: 35rpx;
		margin-right: 50%;
		margin-top: 5%;
	}
	
	.content-bottom {
		margin-top: 20%;
		box-shadow: 2rpx 2rpx 3rpx rgba(0, 0, 0, 0.4);
		padding: 0 70rpx;
	}
</style>